<template>
  <div class="baseBack">
    <!-- :on-refresh="refresh" -->
    <scroller
      class="scroller"
      :on-infinite="infinite"
      :on-refresh="refresh"
      :noDataText="noDataText"
      ref="my_scroller"
    >
      <ul>
        <li v-for="(item, index) in myData" :key="index">
          {{ item }}
        </li>
      </ul>
    </scroller>
  </div>
</template>

<script>
export default {
  name: "todo",
  mounted() {},
  methods: {
    infinite(done) {
      console.log("infinite");
      if (this.myData.length >= 10) {
        this.$refs.my_scroller.finishInfinite(true);
      } else {
        setTimeout(() => {
          this.myData.push(...this.youData);
          this.$refs.my_scroller.finishInfinite(true);
          done();
        }, 1000);
      }
    },
    refresh(done) {
      console.log("refresh");
      this.timeout = setTimeout(() => {
        this.myData = [];
        this.myData.push(...this.newData);
        this.$refs.my_scroller.finishPullToRefresh();
      }, 1500);
    },
  },
  data() {
    return {
      noDataText: "我是有底线的",
      newData:[ {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },
        {
          id: 2,
          name: 2,
          age: 12,
        },],
      youData: [
        {
          id: 1,
          name: 2,
          age: 12,
        },
        {
          id: 1,
          name: 2,
          age: 12,
        },
        {
          id: 1,
          name: 2,
          age: 12,
        },
        {
          id: 1,
          name: 2,
          age: 12,
        },
        {
          id: 1,
          name: 2,
          age: 12,
        },
      ],
      myData: [],
    };
  },
};
</script>

<style lang="less">
.baseBack {
  ul {
    padding: 5px;
    li {
      height: 150px;
      text-align: center;
      line-height: 50px;
      border: 1px solid #ddd;
    }
  }
  .scroller {
    top: 40px;
  }
}
</style>